import React, { useContext } from 'react';
import { View, Text } from 'react-native';
import { NavigationContext } from 'react-navigation';
import AntdIcon from 'react-native-vector-icons/AntDesign';
const BackUp = (props: any) => {
	const navigation = useContext(NavigationContext);
	const { title = '暂无标题' } = props;
	// 返回上一步
	const handleBack = () => {
		navigation.goBack();
	};

	return (
		<View style={[styles.backUp, styles.shadow]}>
			<Text onPress={handleBack} style={[styles.backIcon, styles.head]}>
				<AntdIcon name="left" size={18} />
			</Text>
			<Text style={[styles.title, styles.head]}>{title}</Text>
			<Text style={[styles.right, styles.head]}>111</Text>
		</View>
	);
};
const styles = {
	backUp: {
		height: 45,
		display: 'flex',
		flexDirection: 'row',
		alignItem: 'center',
		justifyContent: 'center',
		backgroundColor: '#fffffe',
	},
	shadow: {
		elevation: 3,
		shadowColor: '#fefefe',
		shadowOffset: { width: 0, height: 0 },
	},
	head: {
		lineHeight: 45,
		textAlign: 'center',
	},
	backIcon: {
		width: 45,
	},
	title: {
		flexGrow: 3,
	},
	right: {
		width: 45,
	},
};
BackUp.defaultProps = {
	goBack: () => {},
};
export default BackUp;
